<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				margin: 10px;
				font-size: 18px;
				border: 1px solid orangered;
				animation: change 3s infinite;
			}
			#totalArea{
				overflow:hidden;
			}
			#box{
				width: 299px;
				height: 303px;
				margin: 100px auto;
				border: 3px solid yellow;
			}
			.innerBox{
				width: 300px;
				height: 100px;
				border-bottom: 2px solid yellow;
			}
			.smallBox{
				display: flex;
				float: left;
				/* line-height: 100px;
				text-align: center; */
				flex-wrap: wrap;
				justify-content: center;
				align-content: center;
				background-color: aqua;
				width: 98px;
				height: 100px;
				border-right: 2px solid yellow;
			}
			/* .last{
				border-right: none;
			} */
			#Lottery:hover{
				background-color: goldenrod;
				font-weight: bolder;
				font-size: 20px;
			}
			@keyframes change{
				from{
					border: 10px solid red;
				}
				to{
					border: goldenrod 10px solid
				}
			}
			
			@keyframes backformal{
				from{
					background-color: #008080;
				}
				to{
					background-color: goldenrod;
				}
			}
			
		</style>
	</head>
	<body>
		<div id="totalArea">
			
			<div id="box">	
					<div class="innerBox">
						<span class="smallBox" id="prize1">手机</span>
						<span class="smallBox" id="prize2">电视</span>
						<span class="smallBox" id="prize3">洗衣机</span>
					</div>
					<div class="innerBox">
						<span class="smallBox" id="prize8">鼠标垫</span>
						<span class="smallBox" id="Lottery" onclick="Bet()">抽奖</span>
						<span class="smallBox" id="prize4">电饭煲</span>
					</div>
					<div class="innerBox">
						<span class="smallBox" id="prize7">安慰奖</span>
						<span class="smallBox" id="prize6">空</span>
						<span class="smallBox" id="prize5">再来一次</span>
					</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	
		var height = document.documentElement.clientHeight - 40;
		window.onload = ()=>{
			document.body.style.height = height + 'px';			
			$ = function(id){return (typeof(id)=='object')?id:document.getElementById(id);};
		}
	
		function Bet(){
			
			let t = $("totalArea");
			t.style.animation = '2s ease 0s infinite normal none running backformal';
			t.style.height = height + 'px';
			
			let Lottery = $("Lottery");
			Lottery.removeAttribute("onclick");
			
			Lottery.style.backgroundColor = 'goldenrod';
			Lottery.style.fontSize = '20px';
			Lottery.style.fontWeight = 'bolder';
			 
			
			for(var i = 1; i < 9; i++){
				$("prize"+i).style.backgroundColor = 'yellow';
				$("prize"+i).style.fontWeight = 'bold';
			}
					
		
			let count = 0;
			let change = 0;
			// 顺序循环效果
			setTimeout(()=>{	
				var fast = setInterval(()=>{
					count++;
					if (count == 34) clearInterval(fast);
					
					change++;
					if(change == 9) change = 1;
					
					for(var i = 1; i < 9; i++){
						$("prize"+i).style.backgroundColor = 'yellow';
						$("prize"+i).style.fontWeight = 'bold';	
					}
					$("prize"+change).style.backgroundColor = 'aqua';
					$("prize"+change).style.fontWeight = 'normal';	
				},100)
			},1500)
			
			// 小风车，注意删除函数之间留出间隔，如果定义不同的
			setTimeout(()=>{
				count = 0;
				change = 0;
				var fast = setInterval(()=>{
					count++;
					if (count == 24) clearInterval(fast);
					
					change++;
					if(change == 5) change = 1;
					for(var i = 1; i < 9; i++){
						$("prize"+i).style.backgroundColor = 'yellow';
						$("prize"+i).style.fontWeight = 'bold';	
					}
					
					switch(change){
						case 1:
							$("prize"+2).style.backgroundColor = 'aqua';
							$("prize"+2).style.fontWeight = 'normal';	
							break;
						case 2:
							$("prize"+4).style.backgroundColor = 'aqua';
							$("prize"+4).style.fontWeight = 'normal';	
							break;
						case 3:
							$("prize"+6).style.backgroundColor = 'aqua';
							$("prize"+6).style.fontWeight = 'normal';	
							break;
						case 4:
							$("prize"+8).style.backgroundColor = 'aqua';
							$("prize"+8).style.fontWeight = 'normal';	
							break;
					}
					
				},100)
			},5000)
		
			var num;
			setTimeout(()=>{	
				count = 0;
				var fast = setInterval(()=>{
					if(count == 0){
						for(var i = 1; i < 9; i++){
							$("prize"+i).style.backgroundColor = 'aqua';
							$("prize"+i).style.fontWeight = 'normal';
						}
					}else if(count != 0){	
						$("prize"+num).style.backgroundColor = 'aqua';
						$("prize"+num).style.fontWeight = 'normal';
					}			
					
					count++;
					num = Math.ceil(Math.random() * 8);
					$("prize"+num).style.backgroundColor = 'yellow';
					$("prize"+num).style.fontWeight = 'bold';	
					
					// console.log(num + " " + count)
					if (count == 60){
						if(num == 5){
							Lottery.setAttribute("onclick",'Bet()');			
							Lottery.style.backgroundColor = 'aqua';
							Lottery.style.fontSize = '18px';
							Lottery.style.fontWeight = 'normal';	
						}else{
							// 不写setTimeout有个显示bug
							setTimeout(()=> {
								// console.log(num+" finnally");
								alert("您抽中了奖品："+$("prize"+num).innerText);
							}, 1500);
						}
						clearInterval(fast);	
					}
				},100)
			},7450)
			
			
				
			
		}
	</script>
</html>
